<template>
    <div class="application-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>奖学金申请</span>
        </div>
        <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入姓名" disabled></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="form.studentId" placeholder="请输入学号" disabled></el-input>
        </el-form-item>
        <el-form-item label="奖学金类型">
          <el-select v-model="awardType" placeholder="请选择奖学金类型">
            <el-option v-for="award in awards" :key="award.value" :label="award.label" :value="award"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交申请</el-button>
        </el-form-item>
      </el-form>
        <div v-if="applicationStatus" class="status-box">
          <p><strong>申请状态:</strong> {{ applicationStatus }}</p>
        </div>
      </el-card>
      <el-card class="box-card mt-20">
        <div class="guide-text">
          <p>请确保申请奖项准确无误。</p>
        </div>
      </el-card>
      <div  style="width: 100%;">
    <el-table :data="tableData" style="width: 100%;height: 300px;">
      <el-table-column prop="name" label="学生姓名" width="120"></el-table-column>
      <el-table-column prop="studentId" label="学号"></el-table-column>
      <el-table-column prop="scho" label="奖学金奖项"></el-table-column>
      <el-table-column prop="scholarshipS" label="奖学金金额"></el-table-column>
      <el-table-column label="申请状态">
        <template slot-scope="scope">
          <el-steps :space="200" :active="getActiveStep(scope.row.status)" :finish-status="getFinishStatus(scope.row.status)">
            <el-step title="提交申请"></el-step>
            <el-step title="审核中"></el-step>
            <el-step title="审核结果"></el-step>
          </el-steps>
        </template>
      </el-table-column>
      <el-table-column width="180">
            <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="delProject(scope.row.studentId,scope.row.creatTime)"></el-button>
            </template>
            </el-table-column>
    </el-table>
  </div>
    </div>
  </template>
  
  <script>
import request from '../../utils/request';

  export default {
    created(){
        this.load()
        this.get()
    },
    data() {
      return {
        form: {
            studentId: '',
            name: '',
          
          
        },
        awardType:{},
        tableData:[],
        applicationStatus: null,
        awards: [
        { label: '国家奖学金', value: 8000 },
        { label: '市级奖学金', value: 5000 },
        { label: '校级奖学金', value: 2000 }
      ],
      };
    },
    methods: {
        load(){
            request.get("/students/message").then(res => {
                this.form.studentId = res.data.student.studentId
                this.form.name = res.data.student.name
            })
        },
        submitForm(formName){
        this.form.scho = this.awardType.label
        this.form.scholarshipS = this.awardType.value
        console.log(this.form)
        request.post("/scholarship/add",this.form).then(res =>{
            if(res.data.code === 0){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
            })
            }else{
                this.$message.error({
            
                 message: res.data.msg,
            
           })
            }
        })
      },
      getActiveStep(status) {
        switch (status) {
          case '待审核':
            return 1;
          case '审核中':
            return 2;
          case '通过':
            return 3;
         case '未通过':
            return 3;
          default:
            return 1;
        }
      },
      getFinishStatus(status){
        switch (status) {
      case '待审核':
        return 'success';
      case '审核中':
        return 'success';
      case '审核通过':
        return 'success';
      case '未通过':
        return 'error';
      default:
        return 'wait'; 
      }},
      get(){
        request.get("/scholarship/msg").then(res =>{
            console.log(res)
            this.tableData = res.data.records
            console.log(this.tableData)
        })
      }
    }
  };
  </script>
  
  <style scoped>
  .application-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  
  .box-card {
    width: 80%;
    margin-top: 20px;
  }
  
  .status-box {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .guide-text {
    line-height: 1.6;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  </style>